<template>
	<view>
		<cu-custom bgColor="bg-orange" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">单词详情</block>
		</cu-custom>
		<view class="content">
			<view class="top">
				<text class="entry">
					{{entry}}
				</text>
			</view>
			<view class="listen" v-show="listen">
				<text style="margin-right: 20rpx;">{{listen}}</text>
				<van-icon name="volume-o" size='50rpx' color='#f9cdad' @click='voiceplay' />
			</view>
			<view class="means" v-if="explain.length">
				<view class="explain">单词解释</view>
				<view v-for="item,index in explain" :key="index" class="eachitem">
					<view style="width: 100rpx;">{{item.part}}</view>
					<view>
						<text v-for="mean,index1 in item.means" :key="index1">{{mean}},</text>
					</view>
				</view>
				<view class="exam">{{exam}}</view>
			</view>
			<view v-else class="Enword">
				<view v-for="item,index in Enword" :key="index" class="eachitem" @click="toeng(item)">
					<view  class="box1">{{item.entry}}</view>
					<view class="box2">{{item.explain}}</view>
				</view>
			</view>
			<view class="mnemonic" v-show="mnemonic.word">
				<view class="title">快速记忆方法</view>
				<view>{{mnemonic.word}}</view>
				<view>{{mnemonic.method}}</view>
			</view>
			<view class="pastExamSents" v-show="pastExamSents.length">
				<view class="title">单词例句</view>
				<view v-for="item,index in pastExamSents" :key="index" class="box">
					<view class="en" style="margin-bottom: 10rpx;">{{item.en}}</view>
					<view class="zh">{{item.zh}}</view>
				</view>
			</view>
			<view class="video" v-show="videoUrl">
				<view class="title">相关学习视频</view>
				<video :src="videoUrl" controls show-mute-btn></video>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				entry: '',
				explain: [],
				listen: '',
				exam: '',
				mnemonic: {},
				pastExamSents: [],
				videoUrl: '',
				Enword: []
			};
		},
		onLoad(options) {
			const {
				item
			} = options; // 获取传递的参数
			const dataArray = JSON.parse(decodeURIComponent(item));
			this.entry = dataArray.entry
			if (this.isChinese(this.entry)) {
				this.getdatachinese()
			} else {
				this.getdata()
			}
		},
		methods: {
			isChinese(str) {
				// 使用正则表达式匹配是否包含中文字符
				var pattern = /[\u4e00-\u9fa5]/;
				return pattern.test(str);
			},
			getdatachinese() {
				uni.request({
					url: 'http://dict.youdao.com/suggest?q=' + this.entry + '&num=1&doctype=json',
					success: (res) => {
						res.data.data.entries[0].explain.split(';').forEach(item => {
							uni.request({
								url: 'http://dict.youdao.com/suggest?q=' + item +
									'&num=1&doctype=json',
								method: "GET",
								success: (res) => {
									this.Enword.push(res.data.data.entries[0])
								}
							});
						})
					},

				});
			},
			getdata() {
				uni.request({
					url: 'https://dict-mobile.iciba.com/interface/index.php?c=word&m=getsuggest&nums=10&is_need_mean=1&word=' +
						this.entry,
					success: (res) => {
						let datajson = res.data;
						this.explain = res.data.message[0].means
					},

				});
				uni.request({
					url: 'https://dict.youdao.com/jsonapi?q=' +
						this.entry,
					success: (res) => {
						console.log(res.data)
						if (res.data.collins) this.listen = '/' + res.data.collins.collins_entries[0]
							.phonetic +
							'/'
						if (res.data.ec&&res.data.ec.exam_type) this.exam = res.data.ec.exam_type.join('/');
						if (res.data.individual) {
							this.mnemonic = res.data.individual.mnemonic;
							for (let i = 0; i < 3; i++) {
								this.pastExamSents.push(res.data.individual.pastExamSents[i]);
							}

						}
						if (res.data.word_video) this.videoUrl = res.data.word_video.word_videos[0].video.url

					},
				});
			},
			// uniapp音频播放的组件
			voiceplay() {
				uni.showLoading({
					title: '加载中'
				})
				const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.autoplay = true;
				// http://dict.youdao.com/dictvoice?type=0&audio=' + key; key 是需要发音的单词，链接就是有道词典的接口链接，返回就是一个音频，直接可以播放，可以直接在游览器打开。
				innerAudioContext.src = 'http://dict.youdao.com/dictvoice?type=0&audio=' + this.entry;
				innerAudioContext.onPlay(() => {
					uni.hideLoading();
				});
				innerAudioContext.onError((res) => {
					console.log(res.errMsg);
					console.log(res.errCode);
					uni.hideLoading();
				});
			},
			toeng(item){
				this.entry=item.entry
				this.getdata()
			}
		}

	}
</script>

<style lang="less" scoped>
	.content {
		margin: 10rpx 23rpx;
	}

	.top {
		display: flex;
		align-items: center;

		.entry {
			color: red;
			font-size: 60rpx;
			font-weight: 800;
			margin-right: 400rpx;
		}
	}

	.means {
		padding-bottom: 10rpx;
		border-bottom: 5rpx solid #eee;

		.eachitem {
			display: flex;
		}

		.explain {
			font-weight: 600;
			font-size: 35rpx;
			color: #f9cdad;
			margin-bottom: 20rpx;
		}

		.exam {
			color: #dadbdb;
			font-size: 28rpx;
			margin-top: 10rpx;
			margin-left: 30rpx;
		}
	}

	.listen {
		color: #dadbdb;
		font-size: 30rpx;
		margin: 20rpx 0rpx;
	}

	.mnemonic {
		margin-top: 20rpx;
		font-size: 32rpx;
		padding-bottom: 10rpx;
		border-bottom: 5rpx solid #eee;

		.title {
			font-weight: 600;
			font-size: 35rpx;
			color: #f9cdad;
			margin-bottom: 20rpx;
		}
	}

	.pastExamSents {
		font-size: 30rpx;
		margin-top: 20rpx;

		padding-bottom: 10rpx;
		border-bottom: 5rpx solid #eee;

		.title {
			font-weight: 600;
			font-size: 35rpx;
			color: #f9cdad;
			margin-bottom: 20rpx;
		}

		.box {
			margin-bottom: 10rpx;
		}
	}

	.video {
		font-size: 30rpx;
		margin-top: 20rpx;

		.title {
			font-weight: 600;
			font-size: 35rpx;
			color: #f9cdad;
			margin-bottom: 20rpx;
		}
	}
	.Enword {
	  margin: 10rpx;
	  .eachitem {
	    margin-bottom: 20rpx;
	    .box1 {
	      color: #f9cdad;
	      font-size: 35rpx;
	    }
	    .box2 {
	      font-size: 30rpx;
	      overflow: hidden;  /* 隐藏溢出的文本 */
	      text-overflow: ellipsis;  /* 使用省略号代替文本 */
	      white-space: nowrap;  /* 只显示一行文本 */
	    }
	  }
	}
</style>